<template>
  <div  class="item-wrap" @click="goDetail('commentlist')" :class="{detail:type=='detail'}">
    <div class="item-top">
      <avatar :user="mblog.user" class="left-avatar"></avatar>
      <div class="item-right">
        <div class="name">{{mblog.user.screen_name}}</div>
        <div class="time">{{mblog.created_at}}&nbsp;来自{{mblog.source}}</div>
      </div>
    </div>
    <div class="text-content" v-html='formatText(mblog.text)'></div>
    <repost v-if="mblog.retweeted_status" :mblog="mblog"/>
    <div v-else>
      <pics :mblog="mblog" v-if="mblog.pics && mblog.pics.length>0"/>
      <videopart v-if="mblog.page_info&&mblog.page_info.type =='video'" :vid="mblog.id" :videoData="mblog.page_info"/>
    </div>
        <div v-if="type=='list'" class="item-footer"  @click="prevent($event)">
        <div class="footer-content" @click="goDetail('repostlist')">
            <div class="repost-icon icon">
            </div>
            <div class="repost-text" v-if="mblog.reposts_count">{{mblog.reposts_count}}
            </div>
            <div v-else>转发</div>
        </div>

         <div class="footer-content" @click="goDetail('commentlist')">
            <div class="comment-icon icon">
            </div>
           <div class="comment-text" v-if="mblog.comments_count">{{mblog.comments_count}}
            </div>
            <div v-else>评论</div>
        </div>
         <div class="footer-content" @click="doLike">
            <div class="like-icon icon" v-if="!showAnim" >
                </div>
              <transition name="bounce" @after-enter='afterAnim'>
                <div class="like-icon-big icon" v-if="showAnim">
                </div>
              </transition>
          
            <div class="like-text" v-if="likeCount" :class="{'countColor':isLiked}">{{likeCount}}
            </div>
            <div v-else>赞</div>
        </div>
    </div>
  </div>
</template>

<script>
import avatar from '@/components/avatar'
import pics from './pics'
import videopart from './videopart'
import repost from './repost'

export default {
  name: 'post',
  components:{
    avatar,
    pics,
    videopart,
    repost
  },
  props: {             //使用props时，把它当作初始值，用的时候需要转换一下，在这种情况下，最好使用这个props定义计算机属性
    data: {
      type: Object,
      default: ()=>{
        return {}      //接收对象参数给默认值
      }
    },
    type:{
      type: String,
      default: 'list'
    }
  },
  data(){
    let mblog = this.data.mblog    //将传过来的data中的data.mblog留给本地使用
    let likeCount=mblog.attitudes_count
   return {
      mblog: mblog,
      isLiked:false,
      showAnim:false,
      likeCount:likeCount
    }
  },
  methods:{
    formatText(value){
      let reg=/href=("|')(.+?)("|')/gi;
      return value.replace(reg,'').replace(/<br \/><br \/>/g,'<br/>')//g全文搜索 i忽略大小写
    },
    goDetail(page){
      if(this.type!=='list')return
      this.$store.dispatch('setDetailData',this.data)
      this.$router.push({
        path:'/detail/'+this.mblog.id+'/'+page
      })
    },
    prevent(e){
            e.stopPropagation()
        },
    doLike(){
      if(this.isLiked){
        this.isLiked=false
        this.showAnim=false
        this.likeCount--
      }
      else{
        this.showAnim=true
        this.likeCount++
      }
    },
    afterAnim(){
        this.isLiked=true
        this.showAnim=true
    }
  }
}
</script>
<style scoped>
.item-wrap{
  background-color: #fff;
}
.item-wrap.detail{
  padding-bottom: 15px;
}
.item-wrap.detail .name{
  color: #333;
}
.item-top {
  display: flex;
}
.item-right {
  flex: 1;
}
.left-avatar {
  margin: 15px;
}
.name {
  margin-top: 18px;
  font-size: 17px;
  color: rgb(250,113,20);
}
.time {
  margin-top: 3px;
  font-size: 13px;
  color: rgb(134,134,134);
}
.text-content{
  font-size: 17px;
  padding-left: 15px;
  line-height: 25px;
  padding-right: 15px;
  margin-top: 6px;
  margin-bottom: 12px;
}
.text-content /deep/ a,.text-content /deep/ .surl-text{
  color: #3c6e9e;
}
.item-footer{
    display: flex;
    font-size: 17px;
    border-top:0.5px solid #e4e4e4;
    margin-top: 12px;
    color: #5e5e5e;
    height: 35px;
    line-height: 35px;
}
.item-footer .icon{
    width: 15px;
    height: 15px;
    background-size: cover;
    margin-right: 4px;
    margin-top:10px ;
}
.footer-content{
    flex: 1;
    display: flex;
    justify-content: center;
    align-content: center;
}
.countColor{
color:red;
}
.repost-icon{
  background-image: url('./imgs/repost.png');
  background-repeat: no-repeat;
}
.comment-icon{
  background-image: url('./imgs/comment.png');
  background-repeat: no-repeat;
}
.like-icon{
  background-image: url('./imgs/like.png');
  background-repeat: no-repeat;
}
.bounce-enter-active{
  animation: bounce-in 1s;
  animation-timing-function: ease-in-out;
}
.like-icon-big{
  background-repeat: no-repeat;
  background-image: url('./imgs/liked.png');
}
.liked{
  background-image: url('./imgs/liked.png');
  background-repeat: no-repeat;
}
@keyframes bounce-in {
  0% {
    transform: rotate(0deg) scale(1);
  }
  30% {
    transform: rotate(20deg);
  }
  50% {
    transform: rotate(-10deg) scale(2.5);
  }
  100% {
    transform: rotate(0deg) scale(1);
  }
}
</style>